import React, { memo ,useEffect, shallowequal} from 'react'
import {HNTopRankingWrap} from './style'
import {useDispatch,useSelector} from 'react-redux'
import {getTopListAction,changeCurrentIndex,getDetailListAction} from '../../store/actionCreator'
import {getSizeImage} from 'utils/format-utils'
export default memo(function HNTopRanking() {

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getTopListAction());
  },[dispatch])

  const {topList,currentIndex} = useSelector(state => ({
    topList : state.getIn(["ranking", "topList"]),
    currentIndex : state.getIn(["ranking", "currentIndex"])
  }),shallowequal)

  useEffect(() => {
    const id = (topList[currentIndex] && topList[currentIndex].id)
    dispatch(getDetailListAction(id))
  },[dispatch,currentIndex,topList])

  const clickItem = index => {
    dispatch(changeCurrentIndex(index))
  }

  return (
    <HNTopRankingWrap>
      {
        topList.map((item,index)=>{
          let header;
          if(index ===0 || index ===4){
            header = <div className="rankingHeader">{index ===0 ? "云音乐特色榜" : "全球媒体榜"}</div>
          }
          return(
            <div className="ranking-list" key={item.id}>
              {header}
              <div className="item-content" onClick={e=>clickItem(index)}>
              <div className="image">
                <img src={getSizeImage(item.coverImgUrl,40)} alt="" />
              </div>
              <div className="info">
                <p className="item-name">{item.name}</p>
                <p className="updateFrequency">{item.updateFrequency}</p>
              </div>
            </div>
              </div>
          )
        })
      }
    </HNTopRankingWrap>
  )
})
